<template>
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/admin/user/list' }">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加用户</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="add-user">
        <h3>添加用户</h3>
        <el-form :model="form" :rules="rules" ref="addUser" label-width="80px">
          <el-form-item label="昵称"  prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="Email"  prop="email">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码"  prop="password">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色"  prop="roles">
            <el-select v-model="form.roles" multiple placeholder="请选择">
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.display_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" >
            <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add">立即创建</el-button>
            <el-button @click="reset">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
      name: "UserAdd",
      data(){
        return {
          form:{
            status:1
          },
          roles:[],
          rules:{
            name:[
              { required: true, message: '请输入昵称', trigger: 'blur' },
              { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
            ],
            email:[
              { required: true, message: '请输入邮箱', trigger: 'blur' },
              { type:'email', message: '请输入合法email', trigger: 'blur' },
              { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
            ],
            password:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
            ],
            roles:[
              { required: true, message: '请选择角色', trigger: 'blur' },
            ]
          },
        }
      },
      created(){
        this.allRoles()
      },
      methods:{
        add(){
          this.$refs.addUser.validate(valid =>{
            if(valid){
              this.axios.post('/api/admin/user',this.form).then(res => {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.form = {status:1}; // 清空表单数据
                // this.$refs.addUser.resetFields()
              }).catch(err => {
                this.$message.error(err.response.data.message)
              });
            }
            else{
              this.$message.error("请填写完整信息")
            }
          });
        },
        allRoles(){
          this.axios.get('/api/admin/role/all-roles').then(res=>{
            this.roles = res.data.data;
            console.log(res);
          }).catch(err=>{
            this.$message.error(err.response.data.status)
          });
        },
        reset(){
          this.$router.push('/admin/user/list')
        }
      }
    }
</script>

<style scoped lang="less">
.add-user{
  width: 400px;
  margin-top: 20px;
}
</style>
